<script setup lang="ts">
// import Bar from './Bar.vue' // 柱状图
// import Line from './Line.vue' // 柱状图
// import Pie from './Pie.vue' // 饼状图
</script>

<template>
  <div class="container">
    <div class="row">
      <div class="cell">
        <!-- <Bar></Bar> -->
        <CartogramBar></CartogramBar>
      </div>
      <div class="cell">
        <!-- <Line></Line> -->
        <CartogramLine></CartogramLine>
      </div>
    </div>
    <div class="row">
      <div class="cell">
        <!-- <Pie></Pie> -->
        <CartogramPie></CartogramPie>
      </div>
      <div class="cell">
        <CartogramMap></CartogramMap>

      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.row {
  flex: 1;
  display: flex;
  flex-direction: row;
}
.cell {
  flex: 1;
  border: 1px solid #d3d3d3;
}
</style>